<template>
	<div class="index">
		<div class="login-box">
			<h5 class="title">农产品供销管理系统(登录)</h5>
			<el-form
				:model="loginForm"
				:rules="loginRules"
				ref="loginForm"
				label-width="6.25rem"
				class="login-form"
			>
				<el-form-item prop="username">
					<el-input
						clearable
						prefix-icon="el-icon-user-solid"
						v-model="loginForm.username"
						placeholder="账号"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						show-password
						clearable
						prefix-icon="el-icon-lock"
						v-model="loginForm.password"
						placeholder="密码"
					></el-input>
				</el-form-item>
				<el-form-item prop="code" style="width: 190px">
					<el-input
						clearable
						prefix-icon="el-icon-key"
						v-model="loginForm.code"
						placeholder="验证码"
						maxlength="6"
					></el-input>
					<div class="code-box" @click="getCaptcha">
						<img :src="code.url" />
					</div>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="remePass">记住密码</el-checkbox>
					<el-link type="primary" style="margin: 0 0 0 90px" @click="goRegister"
						>您还未注册,请先注册?</el-link
					>
				</el-form-item>
				<el-form-item>
					<el-button
						style="width: 100%"
						type="primary"
						@click="login('loginForm')"
						:loading="loadLogin"
						>{{ loadLogin ? "" : "登录" }}</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { getCaptcha, submitLogin } from "@/api/login"
import { loginRules } from "@/utils/rules/user"
export default {
	name: "FrontIndex",

	data() {
		return {
			loadLogin: false,
			loginForm: {
				username: "admin",
				password: "123456",
				code: "",
			},
			code: {
				key: "",
				url: "",
			},

			remePass: true,
		}
	},
	computed: {
		loginRules,
	},
	created() {
		this.$store.commit("changeAbortCon", null)
	},
	mounted() {
		if (this.loadInstance()) {
			this.closeLoading()
		}
		this.getCaptcha()
		this.randomXClientId()
	},
	methods: {
		async login(formName) {
			if (this.checkForm(this, formName)) {
				let post = {
					code: {
						...this.code,
						val: this.loginForm.code,
					},
					form: this.loginForm,
					remePass: this.remePass,
				}
				this.loadLogin = true
				let res = await submitLogin(post)
				if (res.code == 200) {
					this.$store.commit("login", res.data)
					if (this.$store.state.token) {
						this.$router.push("/index")
					}
				}
				this.loadLogin = false
			}
		},
		async getCaptcha() {
			try {
				let res = await getCaptcha()
				if (res.code == 200) {
					let { codeUrl, codeKey } = res.data
					this.code.url = codeUrl
					this.code.key = codeKey
				}
			} catch (error) {
				console.error(error)
			}
		},
		goRegister() {
			this.$router.push("/register")
		},
		randomXClientId() {
			this.$store.commit("changeXClientId", this.$Tool.uuid())
		},
	},
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
	margin: 0 !important;
}
.index {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	background-image: url("@/static/imgs/login/bg.gif");
}

.login-box {
	width: 22.5rem;
	height: 25rem;
	background: white;

	.title,
	.login-form {
		margin: 20px 0 0 0;
	}

	.title {
		height: 20px;
		line-height: 20px;
		font-size: 18px;
		text-align: center;
	}

	.login-form {
		width: 320px;

		padding: 20px;
		.code-box {
			right: -120px;
			position: absolute;
			bottom: -1px;
			width: 100px;
			height: 40px;
			border: 1px solid rgba(23, 201, 103, 0.725);

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
